<template>
  <!--我的歌单组件-->
  <div class="mysongList">
    <ul>
      <li>
        <div class="songImg" @click="skipGrabble('songListShow',songInfo.id)">
          <img :src="songInfo.coverImgUrl" alt />
          <span>{{songInfo.name}}</span>
        </div>
        <div class="creator">
          <p>{{songInfo.creator.nickname}}</p>
        </div>
        <div class="listNumber">
          <p>{{songInfo.trackCount}}首</p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "mysongList",
  props: ["songInfo"],
  mounted() {
    //console.log(this.songInfo);
  },
  methods:{
    skipGrabble(path, val) {
      this.$router.push({
        name: path,
        query: {
          keyWord: val
        }
      });
    }
  }
};
</script>

<style scoped lang='less'>
.mysongList {
  ul {
    padding: 0;
    li {
      display: flex;
      height: 50px;
      font-family: 'Courier New', Courier, monospace;
      div:hover {
          color:#31c27c;
          cursor: pointer;
        }
      .songImg {
        flex: 2;
        img {
          width: 50px;
          height: 50px;
          vertical-align: middle;
        }
        span {
          margin-left: 20px;
        }
      }
      .creator {
        flex: 1;
      }
      .listNumber {
        flex: 1;
        p {
          text-align: center;
        }
      }
    }
  }
}
</style>